<template>
    <div style="margin: auto;width: 70%;min-height: 650px">
        <div style="margin: 10px 0 10px 0">
            <h1>{{formData.title}}</h1>
            <h4>{{formData.helpUserName}}  &nbsp;&nbsp;&nbsp;&nbsp;  {{formData.createTime}} </h4>
        </div>
        <Divider />
        <div v-html="formData.content"></div>
        <Divider />
        <div style="text-align: center">
            <Button type="primary"  :to="{ name: 'donate_donate_edit', query: { helpId:formData.id } }"
                    v-if="formData.auditResult=='01' && formData.helpUserId != loginUserId">我要捐赠</Button>
        </div>
        <Divider />
        <div style="margin:5px;margin-top: 60px">
            <Tag color="green">捐赠记录</Tag>
        </div>
        <Table :data="tableData"  :columns="columns"   highlight-row  >

        </Table>
        <Spin size="large" fix v-if="spinShow"></Spin>
    </div>
</template>

<script>
    import Base from '@/components/table/BaseEdit.vue';
    import dictUtils from '@/common/dictUtils';
    import user from '@/common/user';
    export default {
        extends:Base,
        name: "MyView",
        data(){
            return {
                loginUserId:user.getUser().id,
                formData:{},
                columns: [
                    { type: 'index', width: 60, align: 'center'},
                    /*{ title: '求助内容详情', key: 'content'},*/
                    { title: '捐赠者', width: 250, key: 'donatorUserName'},
                    { title: '求助标题', key: 'helpTitle'},
                    { title: '捐赠类型', key: 'type'},
                    { title: '捐赠内容详情', key: 'content'},
                    { title: '捐赠时间', key: 'createTime'}
                ],
                tableData:[]
            }
        },
        mounted(){
            this.initData();
        },
        methods:{
            loadDataById(){
            },initData(){
                let id=this.$route.query.id;
                if(id != null && id != ""){
                    this.$axiosUtils.post("/api/help/readByMap",{id}).then((res)=>{
                        this.formData=res;
                    }).catch(function (error) {
                        this.$Message.error(error);
                    })

                    this.$axiosUtils.post("/api/donate/list",{auditResult:'01',current:1,size:10000,helpId:id}).then((res)=>{
                        this.tableData=res.records;
                        dictUtils.decodeList('donate_type',this.tableData,"type")
                    }).catch(function (error) {
                        this.$Message.error(error);
                    })
                }else{
                    this.$Message.error("页面出错！");
                }
            }
        }

    }
</script>
<style src="@/assets/css/TableView.css" scoped></style>
<style scoped >
    .mb-tb td:nth-of-type(odd){width: 10%;}
    .mb-tb td:nth-of-type(even){width: 40%}
</style>
